<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>在线车牌号识别</title>
    <link rel="shortcut icon" href="/static/imgs/favicon.ico">
    <link rel="stylesheet" type="text/css" href="/static/css/fontawesome_all.min.css" />
    <link rel="stylesheet" type="text/css" href="/static/css/bootstrap.min.css" />

    <script type="text/javascript">
        var ver = Math.random()
        var args_str = "?" + ver

        document.write("<link rel='stylesheet' type='text/css' href='/static/css/online_lnr.css" + args_str +"' />")
        document.write("<link rel='stylesheet' media='(max-width: 320px)' href='/static/css/online_lnr_320.css" + args_str +"' />")
        document.write("<link rel='stylesheet' media='(max-width: 360px)' href='/static/css/online_lnr_360.css" + args_str +"' />")
        document.write("<link rel='stylesheet' media='(max-width: 400px)' href='/static/css/online_lnr_400.css" + args_str +"' />")
        document.write("<link rel='stylesheet' media='(max-width: 720px)' href='/static/css/online_lnr_720.css" + args_str +"' />")
        // document.write("<link rel='stylesheet' media='(max-width: 750px)' href='/static/css/online_lnr_750.css" + args_str +" />")
        // document.write("<link rel='stylesheet' media='(max-width: 768px)' href='/static/css/online_lnr_768.css" + args_str +"' />")
        // document.write("<link rel='stylesheet' media='(max-width: 828px)' href='/static/css/online_lnr_828.css" + args_str +"' />")
        // document.write("<link rel='stylesheet' media='(max-width: 1080px)' href='/static/css/online_lnr_1080.css" + args_str +"' />")
    </script>

    <script type="text/javascript" src="/static/js/jquery-3.4.1.min.js"></script>
</head>

<body>
    <div class="header">
        <div class="container">
            <div class="row no-gutter">
                <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
                    <h1 class="header-logo">
                        <a class="header-logo-img" href="/">
                            <img src="/static/imgs/machine_eye.jpg" class="machine_eye">
                        </a>
                    </h1>
                </div>
                <div class="col-lg-9 col-md-9 col-sm-9 col-xs-9">
                    <!-- navigation: mobile -->
                    <a id="menu-button-mobile" class="fa fa-bars pull-right"
                        href="javascript:toggle_mobile_menu();"></a>

                    <!-- navigation: desktop + tablet -->
                    <ul id="menu" class="pull-right">
                        <li class="menu-item  menu-item-current ">
                            <a href="#desc">
                                说明
                            </a>
                        </li>
                        <li class="menu-item ">
                            <a href="#ext">
                                文件格式
                            </a>
                        </li>
                        <li class="menu-item ">
                            <a href="#browser">
                                浏览器支持
                            </a>
                        </li>
                        <li class="menu-item ">
                            <a href="https://gitee.com/theing/online-lpr" class="menu-item ">
                                <i class="fa fa-heart"></i>
                                <img src="/static/imgs/github_logo.png" class="github_logo">
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div id="menu-container-mobile">
        <div class="container">
            <ul id="menu-mobile">
                <li class="menu-item  menu-item-current ">
                    <a href="#desc">
                        说明
                    </a>
                </li>
                <li class="menu-item ">
                    <a href="#ext">
                        文件格式
                    </a>
                </li>
                <li class="menu-item ">
                    <a href="#browser">
                        浏览器支持
                    </a>
                </li>
                <li class="menu-item ">
                    <a href="https://github.com/himrkeyboard/OnlineLNR" class="menu-item ">
                        <i class="fa fa-heart"></i>
                        <img src="/static/imgs/github_logo.png" class="github_logo">
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <div id="drag-area">
        <div class="container">
            <div class="col-lg-5 col-md-5 col-sm-5 col-xs-5">
                <img class="big_logo" src="/static/imgs/car.png">
            </div>
            <div class="col-lg-7 col-md-7 col-sm-7 col-xs-7">
                <div>
                    <h2 class="drag-box-title">
                        <div>
                            在线车牌号码
                        </div>
                        <div>
                            识别系统
                        </div>
                    </h2>
                </div>
                <div id="drag_target_box" class="row">
                    <div id="drag-target" class="col-lg-8 col-md-8 col-sm-8 col-xs-8">
                        <span>拖拽图片到浏览器内</span>
                    </div>
                    <div class="button operating-button col-lg-4 col-md-4 col-sm-4 col-xs-4" id="click_target">
                        <span>或 点击上传</span>
                        <input type="file" name="photo" id="upload_input" class="display_none">
                    </div>
                </div>
                <div id="mobile-form">
                    <div class="input-frame">
                        <button id="mobile_choose_btn" type="button"
                            class="btn btn-default input-replace display_block">选择图片...</button>
                        <input id="mobile_choose_input" class="input mobile_upload_input" type="file" name="photo">
                    </div><br>
                    <button type="button" id="mobile_form_submit" class="btn btn-default"
                        disabled="disabled">开始识别</button>
                </div>
                <div>
                    <img id="convert-arrow" class="convert-arrow" src="/static/imgs/arrow.png">
                </div>
            </div>
        </div>
    </div>
    <div class="container content-box">
        <div class="row description">
            <div class="col-md-6 result_photo_div">
                <img id="result_photo" class="result_photo" src="/static/imgs/default_car.jpg">
            </div>
            <div class="mobile_blank_div"></div>
            <div id="car_div" class="col-md-6 car_div">
                <div class="car_info">
                    <label for="span_msg">识别结果：</label>
                    <div id="span_msg" class="span_msg line"></div>
                </div>
                <div class="draw_block"></div>
                <div class="car_info">
                    <label for="span_plate">车牌号码：</label>
                    <span id="span_plate" class="span_plate"></span>
                </div>
                <div class="car_info">
                    <label for="span_confidence">可信度：</label>
                    <span id="span_confidence" class="span_confidence"></span>
                </div>
                <div class="car_info">
                    <label for="span_location">矩形号牌坐标：</label>
                    <div id="span_location" class="car_info_item">
                        <div class="display_block">
                            <label for="span_top">顶部<i class="fa fa-hand-point-right"></i></label>
                            <span id="span_top_left" class="span_top_left"></span>
                            <span id="span_top_right" class="span_top_right"></span>
                        </div>
                        <div class="display_block">
                            <label for="span_bottom">底部<i class="fa fa-hand-point-right"></i></label>
                            <span id="span_bottom_left" class="span_bottom_left"></span>
                            <span id="span_bottom_right" class="span_bottom_right"></span>
                        </div>
                    </div>
                </div>
                <div class="car_info">
                    <label for="span_time">识别耗时：</label>
                    <span id="span_time" class="span_time"></span>
                </div>
                <div class="car_info">
                    <label for="span_size">图片大小：</label>
                    <span id="span_size" class="span_size"></span>
                </div>
                <div class="car_info">
                        <label for="span_name">图片名称：</label>
                        <span id="span_name" class="span_name"></span>
                    </div>
                <div class="car_info">
                    <label for="span_dpi">图片分辨率：</label>
                    <span id="span_dpi" class="span_dpi"></span>
                </div>
            </div>
        </div>
    </div>
    <br>
    <div class="container content-box">
        <div class="row description">

            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                <a name="desc"></a>
                <h3 class="content-box-title">说明</h3>
                <p>
                    本系统为开源项目，代码地址： <a href="https://gitee.com/theing/online-lpr">OnlineLNR</a>。
                    请遵循GPL3.0许可使用本代码。如有任何问题或建议，请提交 <a href="https://gitee.com/theing/online-lpr/issues">New
                        issues</a> 。
            </div>

            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                <a name="ext"></a>
                <h3 class="content-box-title">文件格式</h3>
                <p>
                    你可以上传一个小于2M的图片，格式支持 JPG、JPEG、PNG。
                    可以使用拖拽或选择文件的方式上传包含车牌号的图片。
                </p>
            </div>

            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                <a name="browser"></a>
                <h3 class="content-box-title">浏览器支持</h3>
                <p>
                    经过编码的结果与以下所有浏览器和版本兼容。如果有什么问题，请给我联系我。
                </p>
                <ul id="browser-support">
                    <li>
                        <img src="/static/imgs/chrome_24x24-a7ca66e6b4.png" class="browser_icon">Chrome 4+
                    </li>
                    <li>
                        <img src="/static/imgs/safari_24x24-4b9304e7c1.png" class="browser_icon">Safari 3.1+
                    </li>
                    <li>
                        <img src="/static/imgs/firefox_24x24-9cb479bf41.png" class="browser_icon">Firefox 2+
                    </li>
                    <li>
                        <img src="/static/imgs/opera_24x24-1e135b7c74.png" class="browser_icon">Opera 9+
                    </li>
                    <li>
                        <img src="/static/imgs/edge_24x24-11efc6ad6b.png" class="browser_icon">Edge
                    </li>
                    <li>
                        <img src="/static/imgs/ie9-10_24x24-4a2e4800a5.png" class="browser_icon">IE 8+
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div id="footer" class="container">
        © 2019 <a href="https://gitee.com/theing" target="_aselank">theing</a>
        &nbsp; - &nbsp;
        <a href="https://github.com/paulirish/browser-logos" target="_blank">Browser Icons</a> by <a
            href="http://www.paulirish.com/" target="_blank">Paul Irish</a>
        &nbsp; - &nbsp;
        <a href="https://gitee.com/theing/online-lpr/blob/master/LICENSE">LICENSE</a>
    </div>
    <div id="drag_overlay"></div>
    <script type="text/javascript">
        var ver = Math.random()
        var js = document.createElement("script")
        js.type= "text/javascript"
        js.src = "/static/js/index.js?ver=" + Math.random()
        document.body.appendChild(js)
    </script>
</body>
</html>